<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 工具 -->
    <script src="js/HttpUtil.js"></script>

    <title>商品分类</title>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                商品类型
            </div>
<!--            <div class="panel-body">-->
<!--                <div class="row">-->
<!--                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">-->
<!--                        <div class="form-group form-inline">-->
<!--                            <span>商品分类</span>-->
<!--                            <input type="text"id="typeName" name="username" class="form-control">-->
<!--                        </div>-->
<!--                    </div>-->
<!--&lt;!&ndash;                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">&ndash;&gt;-->
<!--&lt;!&ndash;                        <div class="form-group form-inline">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span>商品名称</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <input type="text" name="pubdate" class="form-control">&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">-->
<!--                        <button type="button" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>-->
<!--                    </div>-->
<!--                </div>-->
                <div style="overflow: scroll;height: 600px;">
                    <table id="tb" class="table table-striped table-hover table-bordered">
                        <tr>
                            <td>序号</td>
                            <td>类型</td>
<!--                            <td>等级</td>-->
<!--                            <td>所属类型</td>-->
<!--                            <td>操作</td>-->
                            <td>操作</td>
                            <td>操作</td>
                        </tr>
                        <tbody id="tb_list" class="table table-striped table-hover table-bordered">

                        </tbody>
                    </table>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    <table id="tb_up">
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <a class="btn btn-default" data-dismiss="modal">取消</a>
                                    <a class="btn btn-primary" data-dismiss="modal" onclick="upUser()">修改</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        loadType();
    });
    //请求信息
    function loadType(){
        //ajax 请求后台
        var url="adminType/select";
        url=appendHost(url);
        $.ajax({
            url:url,
            method:"post",
            success:function (resp) {
                handleResp(resp,function (res) {
                    console.log("showGoodsType")
                    console.log(res);
                    var html = res.map(function (s) {
                        var template =
                            `<tr class="tr_head">
                    <td>${s.id}</td>
                    <td>${s.typeName}</td>
                    <td><button class="btn btn-warning" onclick="delType(${s.id})">删除</button></td>
                    <td><button class="btn btn-primary" data-toggle="modal" onclick="selectByIdUser(${s.id})" data-target="#myModal">
                    修改</button>
                    </td>`;
                        return template
                    }).join("");
                    $("#tb_list").html(html);
                });
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
            }
        });
    }
    //通过ID查询用户信息
    function selectByIdUser(id) {
        let url = "adminType/selectById";
        let params = {id:id};
        // let pJson=JSON.stringify(params);
        console.log(id);
        httpGet(url, params, function (res) {
            console.log("showGoodsType")
            console.log(res);
            var template =
                `<tr><td>编号:</td><td id="id">${res.id}</td></tr>
                     <tr><td>商品分类:</td><td><input type="text" value="${res.typeName}"></td></tr>`;
            $("#tb_up").html(template);
        });
    }
    //修改用户
    function upUser() {
        if (confirm("确认要修改吗?")) {
            let url = "adminType/update";
            let params = {
                id:$("#tb_up").find('tr:eq(0)').children('td:eq(1)').text(),
                typeName:$("#tb_up").find('tr:eq(1)').find("input").val()
            };
            console.log(params);
            httpPost(url, params, function () {
                loadType();
            });
        }
    }
    //删除商品分类
    function delType(id) {
        if (confirm("确认要删除吗?")) {
            let url = "adminType/delete";
            let params = {id:id};
            console.log(params);
            httpGet(url, params, function () {
                loadType();
            });
        }
    }
</script>
</body>
</html>